<template lang="html">
    <div class="filter">
        <div class="filter-top">

            <el-input class="filter-item" placeholder="彩币ID" v-model="listQuery.colorId"></el-input>
            <el-date-picker @change="setEndDate" v-model="listQuery.createTime" type="date" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>

            <el-select v-model="listQuery.status" placeholder="发币状态">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>

            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <i></i>
            <el-button type="primary" icon="close" @click="clean">清空</el-button>

        </div>

        <div class="filter-cen">
            <el-table :data="tableData" border class="centable" :default-sort = "{prop: 'date', order: 'descending'}" v-loading.body="loading">
                <el-table-column :align="'center'" prop="colorId" label="彩币ID" width="100"></el-table-column>
                <el-table-column :align="'center'" prop="auditTime" label="审核时间" width="180"></el-table-column>
                <el-table-column :align="'center'" label="审核备注">
                    <template scope="scope">
                        <el-tooltip class="tooltip-item" effect="dark" :content="scope.row.remark" placement="top">
                            <el-tag>{{scope.row.remark}}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column :align="'center'" prop="issueTime" label="发行时间" width="180"></el-table-column>
                <el-table-column :align="'center'" prop="issueSubject" label="发行主体"></el-table-column>
                <el-table-column :align="'center'" label="状态" width="120">
                    <template scope="scope">
                        <el-tag>{{scope.row.status | transformStatus}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :align="'center'" label="操作" width="90">
                    <template scope="scope">
                        <el-button @click.native.prevent="eidt(scope.$index, scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="filter-page" v-show="tableData.length != 0">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pageTotal">
            </el-pagination>
        </div>


        <el-dialog title="详情" :visible.sync="dialogFormVisible">
             <el-form :model="dialogForm">

                <!--<el-button type="primary">审核通过</el-button>
                <el-button type="primary">审核不通过</el-button>
                <el-button type="primary">流程终止</el-button>
                <el-button @click="dialogFormVisible = false" type="primary">取消</el-button>
                -->
                <el-form-item label="审核意见:">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" disabled v-model="dialogForm.remark">
                    </el-input>
                </el-form-item>



                <h4 >基本信息</h4>
                <el-form-item label="彩币ID:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.colorId" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="@币:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.baseCoinType" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="彩币中文名称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币英文全称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.ename" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币英文简称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.shortName" disabled></el-input>
                </el-form-item>
                <el-form-item label="发行主体:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.issuingSubject" disabled></el-input>
                </el-form-item>
                <el-form-item label="官方网站:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.contractUrl" disabled></el-input>
                </el-form-item>
                <el-form-item label="发行量:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.totalAmount" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币LOGO:" :label-width="formLabelWidth">
                    <img class="form-log" :src="dialogForm.logoUrl" alt="">
                </el-form-item>

                <el-form-item label="彩币描述:" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="dialogForm.description" disabled></el-input>
                </el-form-item>

                <h4 >资产信息</h4>
                <el-form-item label="资产地址：" class="form-ipt" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.assetAddress" disabled></el-input>
                </el-form-item>

            </el-form>

        </el-dialog>

    </div>
</template>

<script>
export default {
    name:'already',
    data(){
        return{
            msg:'already',
            loading:true,
            dialogFormVisible: false,
            formLabelWidth: '100px',
            statusOptions: [
                {value: 0,label: '所有状态'},
                // {value: 1,label: '暂存'},
                {value: 2,label: '提交（待审核）'},
                {value: 3,label: '初审未通过'},
                {value: 4,label: '终止'},
                {value: 5,label: '初审通过'},
                {value: 6,label: '待终审'},
                {value: 7,label: '终审未通过'},
                {value: 8,label: '终审通过'},
            ],
            listQuery:{
                "colorId"       : "",//彩色币id
                "createTime"    : "",//创建时间
                "orderBy"       : "auditTime desc",//排序asc desc
                "pageNum"       : 1,//当前页码（从1开始）
                "pageSize"      : 10,
                "status"        : '',//审核状态 1：暂存 2：提交（待审核） 3：初审未通过 4：终止 5：初审通过 6：待终审 7：终审未通过 8：终审通过
            },
            pageTotal   : 0,
            tableData   : [],
            dialogForm  : {
                assetAddress  : "",//资产地址
                colorId       : "",//彩色币ID
                baseCoinType  : "",//@币（基础币）
                name          : "",//彩色币名称
                ename         : "",//英文名称
                shortName     : "",//彩色币简称
                issuingSubject: "",//发行主体
                contractUrl   : "",//官方网站
                totalAmount   : "",//发行量
                description   : "",//描述
                logoUrl       : "",//LOGO图片url
            }
        }
    },
    created(){
        this.getList();
    },
    methods:{
        getList(){
            this.$http({
                url     :'issue/api/v1/issue/order/auditTrack',
                method  :'post',
                body    :this.listQuery
            }).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.tableData = data.responseData.auditTrackList;
                    this.pageTotal = data.responseData.page.count;
                    this.listQuery.pageSize = data.responseData.page.pageSize;
                }
                this.loading = false;
            })
        },
        search(){
            this.getList();
        },
        clean(){
            this.listQuery.colorId =  '';
            this.listQuery.createTime = '';
            this.listQuery.status = '';
            this.getList();
        },
        // 编辑
        eidt(index, rows){
            console.log(index,rows);
            this.dialogFormVisible = true;
            this.$http({
                url     : 'issue/api/v1/issue/order/issueOrder/'+rows.idSeq,
                method  : 'get',
            }).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.dialogForm = data.responseData;
                }
            })
            this.dialogForm = rows;
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        setEndDate(val){
            this.listQuery.createTime = val;
        }
    }
}
</script>

<style lang="less">
.filter{
    padding: 0 20px;
}
.filter-top{
    padding: 20px 0;
    .filter-item{
        width: 200px;
        display: inline-block;
        // vertical-align: middle;
    }
}
.filter-page{
    padding: 15px 0;
}
.el-tag{
    width: 100%;
}
.el-tooltip__popper{
    max-width: 50%;
}
</style>
